@import "../../assets/scss/core/base";

$numeric-input-prefix-cls: #{$jigsaw-prefix}-numeric-input;

.#{$numeric-input-prefix-cls} {
    @include inline-block();
    position: relative;
    width: 120px;
    height: $height-base;
    font-size: $font-size-base;
    opacity: 0;
    user-select: none;
    border: 1px solid $border-color-base;
    border-radius: 3px;
    @include prefixer(transition, (border 0.3s $ease-in-out, box-shadow 0.3s $ease-in-out));
    &:hover {
        border: 1px solid $primary-color;
    }
    &.#{$numeric-input-prefix-cls}-focused {
        border: 1px solid $primary-color;
        box-shadow: $box-focus-shadow;
    }
    &.#{$numeric-input-prefix-cls}-error {
        border: 1px solid $error-color;
        &:hover {
            border: 1px solid $error-color;
        }
        &.#{$numeric-input-prefix-cls}-focused {
            border: 1px solid $error-color;
            box-shadow: none;
        }
    }
    input {
        width: 100%;
        height: 100%;
        padding: 0 20px 0 8px;
        border: none;
        outline: none;
        border-radius: 3px;
    }
    input::-webkit-input-placeholder {
        color: $text-color-secondary;
    }
    input:-ms-input-placeholder {
        color: $text-color-secondary;
    }
    input:-moz-placeholder {
        color: $text-color-secondary;
    }

    &-option-box {
        position: absolute;
        right: 0;
        top: 0;
        width: 20px;
        height: 100%;
        border-left: 1px solid $border-color-base;
        display: none;
        flex-direction: column;
        .#{$numeric-input-prefix-cls}:not(.#{$numeric-input-prefix-cls}-disabled):hover & {
            display: flex;
        }
    }
    &-option-bar {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid $border-color-base;
        cursor: pointer;
        text-align: center;
        &:last-child {
            border-bottom: none;
        }
        &:hover {
            color: $primary-5;
        }
        &:active {
            color: $primary-7;
        }
        &.#{$numeric-input-prefix-cls}-option-bar-disabled {
            cursor: not-allowed;
            @include compatible(color, $disabled-color, $disabled-color-ie11);
            &:hover, &:active {
                @include compatible(color, $disabled-color, $disabled-color-ie11);
            }
        }
    }

    &.#{$numeric-input-prefix-cls}-small {
        height: $height-sm;
    }

    &.#{$numeric-input-prefix-cls}-large {
        height: $height-lg;
    }
}
